// 定义一个GameMap类，它继承自AcGameObject类
class GameMap extends AcGameObject {
    // 构造函数，接收一个类型为AcGamePlayground的playground对象作为参数
    constructor(playground) {
        // 调用父类的构造函数
        super();

        // 将传入的playground对象保存到当前实例的playground属性中
        this.playground = playground;

        // 使用jQuery创建一个canvas元素，并将其保存到当前实例的$canvas属性中
        this.$canvas = $(`<canvas tabindex=0></canvas>`);

        // 获取canvas元素的2D渲染上下文，并将其保存到当前实例的ctx属性中
        this.ctx = this.$canvas[0].getContext('2d');

        // 设置canvas元素的宽度和高度，与playground的宽度和高度相同
        this.ctx.canvas.width = this.playground.width;
        this.ctx.canvas.height = this.playground.height;

        // 将canvas元素追加到playground的$playground元素中
        // 假设$playground是一个jQuery对象，表示游戏地图的容器
        this.playground.$playground.append(this.$canvas);
    }

    // start方法：在游戏的第一帧调用此方法
    start() {
        this.$canvas.focus();
    }

    /**
     * resize方法：用于调整canvas的大小以匹配playground的大小。
     * 当游戏窗口大小改变时，应该调用此方法以确保canvas能够覆盖整个游戏地图区域。
     * 方法内部还设置了填充样式为黑色，并使用fillRect方法填充整个canvas区域，以清除之前的绘制内容。
     */
    resize() {
        // 调整canvas的宽度和高度以匹配playground的宽度和高度
        this.ctx.canvas.width = this.playground.width;
        this.ctx.canvas.height = this.playground.height;

        // 设置填充样式为不透明的黑色（rgba中的alpha值为1表示不透明）
        this.ctx.fillStyle = "rgba(0,0,0,1)";

        // 使用fillRect方法填充整个canvas区域，以清除之前的绘制内容
        // 这样做可以确保每一帧都是从干净的状态开始绘制
        this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    }

    // update方法：每一帧都会调用此方法
    // 在GameMap类中，update方法主要用于调用render方法渲染地图
    update() {
        this.render();
    }

    // render方法：用于渲染游戏地图
    // 在这个方法中，我们使用ctx（CanvasRenderingContext2D对象）在canvas上进行绘制
    render() {
        // 设置填充样式为黑色（rgba(0,0,0,0.2)表示透明黑色）
        this.ctx.fillStyle = "rgba(0,0,0,0.2)";
        // 使用fillRect方法填充整个canvas区域，以清除之前的绘制内容
        // 这样做可以确保每一帧都是从干净的状态开始绘制
        this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
        // 注意：这里只是填充了黑色背景，实际的地图内容需要在此处进一步绘制
    }
}
